<template>
    <div class="home">
    <van-search
      v-model="value"
      placeholder="搜索驾校"
      input-align="center"
      @focus="searchDri"
      >
      <template v-slot:left>
         <span class="plac" @click="show = true">
           {{ plac ? plac : '位置' }}
           </span>
         <van-icon size="16"  name="location-o" />
      </template>
    </van-search>
    <Swipe :theImg="list" />
    <van-grid>
      <van-grid-item>
        <img class="img" src="~@/assets/jz.svg" alt="">
        <p>找驾校</p>
      </van-grid-item>
      <van-grid-item>
        <img class="img" src="~@/assets/car.svg" alt="">
        <p>找教练</p>
      </van-grid-item>
      <van-grid-item @click="$router.push('/safelook')">
        <img class="img" src="~@/assets/jz.svg" alt="">
        <p>安全看</p>
      </van-grid-item>
      <van-grid-item>
        <img class="img" src="~@/assets/study.svg" alt="">
        <p>安全学</p>
      </van-grid-item>
    </van-grid>

    <van-cell class="vant-cell" title="推荐驾校" icon="shop-o" value="更多" is-link />
    <TuiDri v-for="item in homeData" :key="item.id" :tuidri="item" />
    <!-- <van-cell class="mb-9 gpz" title="实名认证" is-link /> -->
    <!-- <van-cell title="消息通知" is-link /> -->
    <Place :theShow ='show' @theAddress='theAddress' />
    <!-- <van-popup
      v-model="searchShow"
      closeable
      position="bottom"
      :style="{ height: '30%' }"
    /> -->
  </div>
</template>

<script>
import Swipe from './components/Swipe'
import TuiDri from './components/TuiDri'
import Place from './components/Place.vue'
import { homeInfo } from '@/api/home.js'
export default {
  name: 'Home',
  components: {
    Swipe,
    TuiDri,
    Place
  },
  data () {
    return {
      value: '',
      list: [
        { id: 1, src: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fhiphotos.baidu.com%2Fnuomi%2Fpic%2Fitem%2Ff7246b600c3387440eed4724590fd9f9d72aa0ba.jpg&refer=http%3A%2F%2Fhiphotos.baidu.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1626573385&t=936d8858cf80ad0a6e9d70713d5c4656' },
        { id: 2, src: 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2103483172,2164553295&fm=26&gp=0.jpg' },
        { id: 3, src: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.jiazhao.com%2Fupload%2Fhuiyuan%2F20171115094742725.thumb.jpg&refer=http%3A%2F%2Fwww.jiazhao.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1626573385&t=d70a573c789857cb8fa5097530999900' },
        { id: 4, src: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Ftoutiao.image.mucang.cn%2Ftoutiao-image%2F2017%2F04%2F27%2F01%2F4a943490a68a400294d8ef3fc78e3c02.png&refer=http%3A%2F%2Ftoutiao.image.mucang.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1626573101&t=8518302c3a6d01389df1429303989ba0' }
      ],
      show: false,
      plac: '',
      homeData: [],
      searchShow: false
    }
  },
  created () {
    this.getHomeInfo()
  },
  methods: {
    theAddress (theAddre) {
      this.show = false
      this.plac = theAddre.title
    },
    async getHomeInfo () {
      const res = await homeInfo()
      this.homeData = res.data
      // console.log(res)
      // console.log(this.homeData)
    },
    searchDri () {
      this.$router.push({
        path: '/search'
      })
    }
  }
}
</script>

<style lang="less" scope>
.home {
  padding-bottom: 100px;
  .van-overlay{
    display: none !important;
  }
  .van-search{
    .plac{
      font-size: 14px;
      // border: 1px solid red;
      width: 48px;
      overflow:hidden;  //超出部分隐藏
      // text-overflow:ellipsis;  //超出部分显示...
      white-space:nowrap;  //文本强制一行显示
    }
    .van-search__content {
      padding-left: 0px;
      // border: 1px solid red;
        .van-field__left-icon {
          display: none !important;
          margin-left: 0px;
        }
    }
  }
  .van-grid img{
    width: 60px;
  }
  .van-grid p{
    font-size: 16px;
  }

  .vant-cell {
    // background-image: url( '~@/assets/01.jpeg' );
    .van-cell__title {
        position: absolute!important;
        left: 70px;
      }
  }
  // .gpz {
  //   flex-shrink: 0;
  //   .van-cell__title {
  //     position: absolute!important;
  //     }
  //   .van-cell__right-icon {
  //     // position: absolute!important;
  //     right: -650px;
  //   }
  // }
}
</style>
